<template>
	<view>
		<view class="tabs">
			<block v-for="(item,index) in arr" :key="index">
				<view @click="selTab(item.id)" class="uni-tab-item-title"
					:class="selIndex == item.id ? 'uni-tab-item-title-active' : ''">{{item.name}}</view>
			</block>
		</view>
		<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
			@up="upCallback" :up="upOption" :down="downOption">
			<view class="list-public" v-for="(item,index) in list" :key="index">
				<view class="name">{{item.activityName}}</view>
				<view class="display-a-js color_757575">
					<view v-if="item.activityType == 1">有效时间：{{time}}</view>
					<view v-if="item.activityType == 4">有效时间：{{item.cardsettings.validTime}}</view>
					<view v-if="item.activityType == 2 || item.activityType == 3 || item.activityType == 5">
						有效时间：{{item.validTime}}</view>
					<image src="../../static/14.png" v-if="types == 1" @click="openPop(item)" class="img-14" >
					</image>
					<!-- <text v-if="types == 2" @click="openDetail(item)" style="color: #6568F6;">详情></text> -->
				</view>
				<view class="padding-bottom_30rpx p-bo" v-if="item.releaseChannel == 2">
				</view>
				<view class="display-a padding_30rpx_0 color_757575 p-bo" v-if="item.releaseChannel == 1 || item.releaseChannel == 3">
					<view class="text-align_center">
						<view class="font-weight_bold font-size_30rpx margin-bottom_10rpx">{{item.likeCount}}</view>
						<view>点赞次数</view>
					</view>
					<view class="line"></view>
					<view class="text-align_center">
						<view class="font-weight_bold font-size_30rpx margin-bottom_10rpx">{{item.commentCount}}
						</view>
						<view>评论次数</view>
					</view>
					<view class="line"></view>
					<view class="text-align_center">
						<view class="font-weight_bold font-size_30rpx margin-bottom_10rpx">{{item.viewCount}}</view>
						<view>播放次数</view>
					</view>
					<!-- <view class="line"></view>
					<view class="text-align_center">
						<view class="font-weight_bold font-size_30rpx margin-bottom_10rpx">{{item.viewCount}}</view>
						<view>转发次数</view>
					</view> -->
				</view>
				<block v-if="item.releaseChannel == 2">
					<view class="padding-bottom_20rpx" v-if="item.activityType == 5"></view>
					<view class="display-a" v-if="item.activityType == 2 || item.activityType == 3">
						<!-- <view class="preview" style="width: 234rpx;" @click="previewPush(item.id,item.activityType)">
							预览活动</view>
						<view class="preview-line"></view> -->
						<view class="preview" @click="winning(item.id)">中奖名单</view>
						<view class="preview-line"></view>
						<view class="preview" @click="openQrCode(item.id,item.qrcode,item.releaseChannel,item.merchantId)">活动二维码</view>
					</view>
					<view class="display-a" v-if="item.activityType == 1 || item.activityType == 4">
						<!-- <view class="preview" @click="previewPush(item.id,item.activityType)">预览活动</view>
						<view class="preview-line"></view> -->
						<view class="preview" style="width: 710rpx;" @click="openQrCode(item.id,item.qrcode,item.releaseChannel,item.merchantId)">活动二维码</view>
					</view>
				</block>
				<block v-if="item.releaseChannel == 1 || item.releaseChannel == 3">
					<!-- <view class="padding-bottom_20rpx" v-if="item.activityType == 5"></view> -->
					<view class="display-a" v-if="item.activityType == 1 || item.activityType == 4 || item.activityType == 5">
						<view class="preview" style="width: 234rpx;" @click="previewPush(item.id,item.activityType)">
							预览活动</view>
						<view class="preview-line"></view>
						<view class="preview" style="width: 234rpx;" @click="userData(item.id)">用户数据</view>
						<view class="preview-line"></view>
						<view class="preview" style="width: 234rpx;"
							@click="openQrCode(item.id,item.qrcode,item.releaseChannel,item.merchantId)">活动二维码</view>
					</view>
					<view class="display-a" v-if="item.activityType == 2 || item.activityType == 3">
						<view class="preview" style="width: 174rpx;" @click="previewPush(item.id,item.activityType)">
							预览活动</view>
						<view class="preview-line"></view>
						<view class="preview" style="width: 174rpx;" @click="winning(item.id)">中奖名单</view>
						<view class="preview-line"></view>
						<view class="preview" style="width: 174rpx;" @click="userData(item.id)">用户数据</view>
						<view class="preview-line"></view>
						<view class="preview" style="width: 174rpx;"
							@click="openQrCode(item.id,item.qrcode,item.releaseChannel,item.merchantId)">活动二维码</view>
					</view>
				</block>
			</view>
		</mescroll-body>

		<sunui-popup ref="pop">
			<template v-slot:content>
				<image class="qrcode" :src="qrcode"></image>
				<view class="tips">请长按二维码保存到手机</view>
			</template>
		</sunui-popup>

		<sunui-popup ref="pop3">
			<template v-slot:content>
				<view class="padding_40rpx p-bo" @click="updata()">修改</view>
				<view class="padding_40rpx p-bo" @click="del()">删除</view>
				<view class="padding_40rpx color_FF0000" @click="closePop()">取消</view>
			</template>
		</sunui-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: '', //1视频快推 2幸运大转盘 3幸运九宫格 4卡券活动 5线下大转盘
				arr: [{
						id: 1,
						name: 'D音'
					},
					{
						id: 2,
						name: '视频号'
					},
					{
						id: 3,
						name: 'K手'
					},
				],
				selIndex: 1,
				
				types: '', //1商家 2员工

				// 下拉配置项
				downOption: {
					auto: false
				},
				// 上拉配置项
				upOption: {
					auto: false
				},

				id: '', //所选活动ID

				currObj: {}, //选中的活动

				list: [],

				windowHeight: '',

				qrcode: '',

				time: '', //商家到期时间

				// 是详情还是 修改 操作
				isDetailButton: false,
			}
		},

		onLoad(options) {
			
			this.types = uni.getStorageSync('types');
			
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight * 2 - 124;
				}
			});
			if (options.time) {
				this.time = options.time;
			}

			// 如果detail 为true 应该显示详情
			if (options.detail == 'true') {
				this.isDetailButton = true
			}
			if (options.type) {
				this.type = options.type;
				if (this.type == 1) {
					this.$sun.title("视频快推");
				}
				if (this.type == 2) {
					this.$sun.title("幸运大转盘");
					this.hiddenVideoId()
				}
				if (this.type == 3) {
					this.$sun.title("幸运九宫格");
					// 隐藏视频号
					this.hiddenVideoId()
				}
				if (this.type == 4) {
					this.$sun.title("卡券活动");
					// 隐藏视频号
					this.hiddenVideoId()
				}
				if (this.type == 5) {
					this.$sun.title("线下活动");
				}
			}
		},

		onShow() {
			this.$nextTick(() => {
				this.mescroll.resetUpScroll();
			});
		},

		methods: {
			// 隐藏视频号

			hiddenVideoId() {
				// 隐藏视频号
				const index = this.arr.findIndex((item) => {
					return item.name == '视频号'
				})
				if (index !== -1) {

					console.log(index)
					this.arr.splice(1, index)
				}
			},
			openQrCode(id, code, type,merchantId) {
				if (type == 2) {
					// 如果渠道为视频号 那么需要跳转到活动页面参加活动
					// if (this.selIndex == 2&&uni.getStorageSync('types')==2) {
					// 	// 那么需要获取到当前的id 跳转到活动页面进行视频号的转发
					// 	uni.navigateTo({ 
					// 		url: '/pages/index/previewPush?id=' +id
					// 	})
					// }else{
					// 	uni.navigateTo({
					// 		url: '/pages/index/videoCode?id=' +id + '&merchantId='+merchantId
					// 	})
					// }
					uni.navigateTo({
						url: '/pages/index/videoCode?id=' +id + '&merchantId='+merchantId
					})
				} else {
					this.qrcode = code;
					this.$refs.pop.show({
						style: 'background-color:#fff;width:600rpx;border-radius:10rpx;padding:50rpx;',
						bottomClose: true,
					});
				}
			},

			//中奖名单
			winning(id) {
				uni.navigateTo({
					url: '/pages/index/winning?id=' + id
				})
			},

			//修改活动
			updata() {
				this.closePop();
				uni.navigateTo({
					url: '/pages/index/release?type=' + this.currObj.activityType + '&id=' + this.currObj.id
				})
			},

			//预览活动
			previewPush(id, type) {
				if (type == 1) {
					uni.navigateTo({
						url: '/pages/index/previewPush?id=' + id+'&preview='+type
					})
				}
				if (type == 2) {
					uni.navigateTo({
						url: '/pages/index/previewTurntable?id=' + id
					})
				}
				if (type == 3) {
					uni.navigateTo({
						url: '/pages/index/previewSquared?id=' + id
					})
				}
				if (type == 4) {
					uni.navigateTo({
						url: '/pages/index/previewCoupon?id=' + id
					})
				}
			},

			//删除活动
			del() {
				this.closePop();
				uni.showModal({
					title: '提示',
					content: '确认删除 ' + this.currObj.activityName + ' 活动?',
					success: async (res) => {
						if (res.confirm) {
							const result = await this.$http.get({
								url: this.$api.delete,
								data: {
									id: this.currObj.id,
								}
							});
							if (result.code == 2000) {
								console.log(result);
								uni.showToast({
									title: '活动删除成功',
									duration: 2000,
								});
								setTimeout(() => {
									this.$nextTick(() => {
										this.mescroll.resetUpScroll();
									});
								}, 2000);
							} else {
								uni.showToast({
									title: result.msg,
									duration: 2000,
									success: (res) => {

									}
								});
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},

			closePop() {
				this.$refs.pop3.close();
			},

			//删除弹窗
			openPop(obj) {
				this.currObj = obj;
				this.$refs.pop3.show({
					style: 'background-color:#fff;width:750rpx;text-align:center;height:auto;overflow-x:auto;border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;',
					anim: 'bottom',
					position: 'bottom',
					topclose: false,
				});
			},

			// selFlag(id,index) {
			// 	this.list[index].flag = !this.list[index].flag;
			// 	this.id = id;
			// },

			//订单列表
			async upCallback(scroll) {
				const result = await this.$http.post({
					url: this.selIndex == 3? this.$api.getMoveActivity : this.$api.getActivity,
					data: {
						activityType: this.type,
						releaseChannel: this.selIndex,
						page: scroll.num,
						id: uni.getStorageSync('merchantId'),
						limit: 10
					}
				});
				if (result.code == 2000) {
					this.mescroll.endByPage(result.data.list.length, result.data.count);
					if (scroll.num == 1) this.list = [];
					this.list = this.list.concat(result.data.list);
				}
			},

			userData(id) {
				uni.navigateTo({
					url: '/pages/index/userData?id='+id+'&selIndex='+this.selIndex
				})

			},

			selTab(id) {
				this.selIndex = id;
				this.$nextTick(() => {
					this.mescroll.resetUpScroll();
				});
			},

			// 跳转到详情页面
			openDetail(item) {
				console.log('详情页面', item)


				// 点击活动预览跳转到活动详情页面
				uni.navigateTo({
					url: '/pages/index/activeDetail?type=' + item.activityType + '&id=' + item.id +
						'&releaseChaannel' + item.releaseChaannel
				})


			}

		}
	}
</script>

<style lang="scss">
	.padding_40rpx {
		padding: 40rpx 20rpx;
	}

	.tips {
		width: 500rpx;
		text-align: center;
		color: #999999;
	}

	.qrcode {
		width: 500rpx;
		height: 500rpx;
		margin-bottom: 10rpx;
	}

	.color_6568F6 {
		font-size: 30rpx;
		padding: 34rpx 0 30rpx;
	}

	.padding_30rpx_0 {
		padding: 44rpx 0;
	}

	// .img-15 {
	// 	width: 180rpx;
	// 	height: 166rpx;
	// 	position: absolute;
	// 	z-index: 9;
	// 	right: 20rpx;
	// 	top: 36rpx;
	// 	// background: url('~static/15.png'); 
	// 	background-repeat: no-repeat;
	// 	background-size: contain;
	// 	text-align: center;
	// }

	.preview-line {
		width: 2rpx;
		background-color: #EEEEEF;
		height: 102rpx;
	}

	.preview {
		width: 354rpx;
		color: #6568F6;
		font-size: 32rpx;
		text-align: center;
		margin: 30rpx 0;
	}

	.line {
		width: 4rpx;
		height: 20rpx;
		background-color: #A1A1A1;
		margin: 0 20rpx;
	}

	.img-14 {
		width: 46.8rpx;
		height: 10.8rpx;
	}

	.display-a-js {
		padding: 0 40rpx 10rpx;
		position: relative;
	}

	.text-align_center {
		width: 206rpx;
		// width: 144rpx;
	}

	.name {
		padding: 30rpx 40rpx 26rpx;
		font-weight: bold;
		font-size: 30rpx;
	}

	.list-public {
		padding: 0;
	}

	.tabs {

		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		width: 750rpx;
		margin-bottom: 20rpx;
		justify-content: center;
	}

	.uni-tab-item-title {
		color: #757575;
		font-size: 28rpx;
		padding: 30rpx 0rpx;
		margin: 0 92rpx;
		flex-wrap: nowrap;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
	}

	.uni-tab-item-title-active {
		color: #6568F6;
		border-bottom: 2px solid #6568F6;
		font-weight: bold;
	}
</style>